import React, { Component } from 'react'
// 在react 中操作表单 有2种方式
// 方式1: 受控组件  value+onChange 实现双向绑定
//  受控组件定义: 表单中的值只收 state中的数据的控制, state变化, 表单值就变化
// 方式2: 非受控组件
export default class Father extends Component {
    state = {
        username: '乔峰',
        sex: '女',
        selected: '北京',
        checkedArr: ['掉渣饼', '酸辣粉']
    }
    render() {
        const { username, sex, selected, checkedArr } = this.state
        return (
            <div>
                {/* 文本框 */}
                <p>
                    <input type='text' value={username} onChange={(e) => this.editFn(e, 'username')} />
                </p>
                {/* 单选框 */}
                <p>
                    <input type='radio'
                        name='sex'
                        value='男'
                        checked={'男' == sex}
                        onChange={(e) => this.editFn(e, 'sex')}
                    />男
                    <input type='radio'
                        name='sex'
                        value='女'
                        checked={'女' == sex} onChange={(e) => this.editFn(e, 'sex')}
                    />女
                </p>
                {/* 下拉框 */}
                <select value={selected} onChange={(e) => this.editFn(e, 'selected')}>
                    <option value='河北'>河北</option>
                    <option value='山西'>山西</option>
                    <option value='北京'>北京</option>
                </select>
                {/* 复选框 */}
                <p>
                    <input type='checkbox'
                        value='麻辣烫'
                        checked={checkedArr.includes('麻辣烫')}
                        onChange={(e) => this.editFn(e, 'checkedArr')}
                    />麻辣烫
                    <input type='checkbox'
                        value='酸辣粉'
                        checked={checkedArr.includes('酸辣粉')}
                        onChange={(e) => this.editFn(e, 'checkedArr')}
                    />酸辣粉
                    <input type='checkbox'
                        value='掉渣饼'
                        checked={checkedArr.includes('掉渣饼')}
                        onChange={(e) => this.editFn(e, 'checkedArr')}
                    />掉渣饼
                </p>
                {/* 提交表单 */}
                <p>
                    <button onClick={() => {
                        console.log('state', this.state)
                    }}>提交表单</button>
                </p>
            </div>
        )
    };
    editFn(e, key) {
        // console.log('e', e);
        // console.log(e.target.value);
        // console.log(this.state.checkedArr);
        // 方式1: setState对象形式修改state
        // 判断当点击的是复选框时, 执行如下操作
        // if (key == 'checkedArr') {
        //     if (this.state.checkedArr.includes(e.target.value)) {
        //         // 点击前, 当前复选框是选中,将该复选框变成不选中
        //         let newArr = this.state.checkedArr.filter((item, index) => {
        //             return item != e.target.value
        //         })
        //         // console.log(newArr);
        //         //修改state
        //         this.setState({
        //             checkedArr: newArr
        //         })

        //     } else {
        //         // 点击前, 当前复选框没有选中,将该复选框变成选中
        //         this.state.checkedArr.push(e.target.value)
        //         this.setState({
        //             checkedArr: this.state.checkedArr
        //         })
        //     }
        // } else {
        //     // 不是复选框时, 执行如下操作
        //     this.setState({
        //         [key]: e.target.value
        //     })
        // }

        // 方式2: setState函数形式修改state
        // 注意:函数形式必须有返回值, 返回值最后和state 数据对象进行合并, 相同的key 覆盖
        // 没有的key 增加
        console.log(key);
        // state = {
        //     username: '乔峰',
        //     sex: '女',
        //     selected: '北京',
        //     checkedArr: ['掉渣饼', '酸辣粉']
        // }
        if (key == 'checkedArr') {
            if (this.state.checkedArr.includes(e.target.value)) {
                // 点击前, 当前复选框是选中,将该复选框变成不选中
                let newArr = this.state.checkedArr.filter((item, index) => {
                    return item != e.target.value
                })
                // console.log(newArr);
                //修改state
                this.setState((state) => {
                    return {
                        checkedArr: newArr
                    }
                })

            } else {
                // 点击前, 当前复选框没有选中,将该复选框变成选中
                this.state.checkedArr.push(e.target.value)
                this.setState((state) => {
                    return {
                        checkedArr: this.state.checkedArr
                    }
                })
            }
        } else {
            this.setState((state, props) => {
                state[key] = e.target.value
                return state
            })
        }
    }
}


